<template>
	<el-container class="mainContainer">

		<el-header>
			<el-row>
				<el-col :span="16" :offset="4">
					<el-menu default-active="/home" class="el-menu-demo" mode="horizontal" background-color="#000000"
						text-color="#fff" active-text-color="#fdfdfd" :router="true">
						<el-menu-item index="/home">概述</el-menu-item>
						<el-menu-item index="/monkeyking">我的猴王</el-menu-item>
						<el-menu-item index="/shop">商城</el-menu-item>
						<el-menu-item index="/artist">艺术家入口</el-menu-item>
						<el-button type="primary" plain @click="connectWallect" :disabled="connectBtnAble">
							{{connectBtnStr}}
						</el-button>
					</el-menu>
				</el-col>
			</el-row>
		</el-header>

		<el-main>
			<router-view></router-view>
		</el-main>

		<!-- <el-footer>Footer</el-footer> -->
	</el-container>
</template>



<script>
	import getWeb3 from "@/common/web3Utils.js";

	export default {
		data() {
			return {
				connectBtnAble: false,
				connectBtnStr: '连接钱包'
			}
		},

		created() {
			console.log("Main.vue created")
		},

		methods: {
			async connectWallect() {
				// console.log("连接钱包")
				getWeb3.Init(addr => {
					// console.log("得到相应的钱包地址：" + addr)
					if (!addr) {
						return
					}
					this.connectBtnStr = addr.substring(0, 6) + '...' + addr.substring(addr.length - 4, addr
						.length)
				})
			}
		},

		name: 'Main',
		props: {
			msg: String
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.mainContainer {
		height: 100vh;
	}

	.el-header,
	.el-footer {
		background-color: #000000;
		color: #d3dce6;
		line-height: 60px;
	}

	.el-header {
		text-align: right;
	}


	.el-main {
		background-color: #000000;
		color: #d3dce6;
		/* text-align: center; */
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.headBtn {
		margin-right: 50px;
	}
</style>
